<!-- 企业管理-企业信息 -->
<template>
  <div>
    <Form ref="form" @ok="search()"></Form>
    <ServiceTime ref="serviceTime" />
    <LevelChoose ref="levelChoose" />
    <ZgNewPage
      ref="page"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :extraBtns="extraBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="330"
      :scrollX="1500"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
      @extra="toExtra"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h, i) in headers"
          :key="`column${i}`"
          :width="h.width === 0 ? 'auto' : h.width"
          align="center"
          :title="h.label"
        >
          <template slot-scope="record">
            <template v-if="h.code === 'compName'">
              <span style="color: #1890ff">{{ record[h.code] }}</span>
            </template>
            <template v-else>
              {{ record[h.code] }}
            </template>
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
const statusList = [
  { value: '1', label: '审核通过' },
  { value: '2', label: '待审核' },
  { value: '3', label: '驳回' }
]
export default {
  components: {
    Form: () => import('./Form.vue'),
    ServiceTime: () => import('./ServiceTime.vue'),
    LevelChoose: () => import('./LevelChoose.vue')
  },
  data() {
    return {
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: true,
        showHeaderConfig: false,
        showAttachBtn: false
      },
      conditions: [
        {
          code: 'name',
          compType: '单行文本',
          label: '企业代码',
          defaultVal: '',
          extra: { placeholder: '请输入企业代码' }
        },
        {
          code: 'name',
          compType: '单行文本',
          label: '企业名称',
          defaultVal: '',
          extra: { placeholder: '请输入企业名称' }
        },
        {
          code: 'name',
          compType: '单行文本',
          label: '信用代码',
          defaultVal: '',
          extra: { placeholder: '请输入信用代码' }
        },
        { code: 'birth', compType: '日期区间', label: '注册日期', defaultVal: '' },
        {
          code: 'name',
          compType: '单行文本',
          label: '焦煤编号',
          defaultVal: '',
          extra: { placeholder: '请输入焦煤编号' }
        },
        {
          code: 'name',
          compType: '单行文本',
          label: '物流编号',
          defaultVal: '',
          extra: { placeholder: '请输入物流编号' }
        },
        { code: 'select', compType: '下拉选择', label: '状态', defaultVal: '', extra: { 下拉选项: statusList } },
        { code: 'birth', compType: '日期区间', label: '服务截止', defaultVal: '' }
      ],
      headers: [
        { code: '1', label: '企业代码', isShow: true, sort: 0, width: 200 },
        { code: 'compName', label: '企业名称', isShow: true, sort: 0, width: 200 },
        { code: '3', label: '企业信用代码', isShow: true, sort: 0, width: 200 },
        { code: '4', label: '企业性质', isShow: true, sort: 0, width: 200 },
        { code: '6', label: '客户类型', isShow: true, sort: 0, width: 200 },
        { code: '7', label: '焦煤编号', isShow: true, sort: 0, width: 200 },
        { code: '8', label: '物流编号', isShow: true, sort: 0, width: 200 },
        { code: '9', label: '审核状态', isShow: true, sort: 0, width: 200 },
        { code: '10', label: '企业等级', isShow: true, sort: 0, width: 200 },
        { code: '11', label: '注册时间', isShow: true, sort: 0, width: 200 },
        { code: '12', label: '服务截止时间', isShow: true, sort: 0, width: 200 },
        { code: '13', label: '状态', isShow: true, sort: 0, width: 200 }
      ],
      dataBtns: [
        {
          key: 1,
          name: '详情',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 2,
          name: '编辑',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 3,
          name: '级别',
          type: 'link',
          isShow: () => {
            return true
          }
        },
        {
          key: 4,
          name: '服务时间',
          type: 'link',
          isShow: () => {
            return true
          }
        }
      ],
      extraBtns: [{ key: 1, name: '新增', icon: 'plus-circle', type: 'primary' }]
    }
  },
  methods: {
    search() {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch(param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [
        {
          key: '1',
          id: '1',
          1: '2012102',
          compName: '秦皇岛楚彤商贸有限公司',
          3: '324234242',
          4: '国有',
          5: '融资企业',
          6: '焦煤用户',
          7: '23123',
          8: '2342413412312',
          9: '待审核',
          status: true,
          11: '2025-01-01',
          12: '2025-01-01',
          13: '2025-01-01'
        },
        {
          key: '2',
          id: '31',
          1: '2012102',
          compName: '秦皇岛楚彤商贸有限公司',
          3: '42423422',
          4: '国有',
          5: '融资企业',
          6: '焦煤用户',
          7: '31312',
          8: '31231312',
          9: '审核通过',
          status: false,
          11: '2025-01-01',
          12: '2025-01-01',
          13: '2025-01-01'
        },
        {
          key: '3',
          id: '44',
          1: '2012102',
          compName: '秦皇岛楚彤商贸有限公司',
          3: '42423422',
          4: '国有',
          5: '融资企业',
          6: '焦煤用户',
          7: '31312',
          8: '31231312',
          9: '驳回',
          status: false,
          11: '2025-01-01',
          12: '2025-01-01',
          13: '2025-01-01'
        }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    toExtra(opt) {
      this.$refs.form.open('add')
    },
    toAdmin(opt) {
      if (opt.key === 1) {
        this.$refs.form.open('detail', opt.obj)
      } else if (opt.key === 2) {
        this.$refs.form.open('edit', opt.obj)
      } else if (opt.key === 3) {
        this.$refs.levelChoose.open()
      } else if (opt.key === 4) {
        this.$refs.serviceTime.open()
      }
    },
    onFilter(f, param) {},
    mergeHeader(newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders
        .filter((t) => {
          return t.isShow
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
